const path = require('path');
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        "index": path.resolve(__dirname, "index.js"),
    },
    output: {
        filename: "[name]_[contenthash:4].js",
        path: path.resolve(__dirname, "dist")
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 配置vue的指向别名
        }
    },
    optimization: { // 优化选项
        splitChunks: { // 代码分割
            cacheGroups: { // 分割的代码块
                vendors: { // vendors代码块
                    chunks: "initial", // 只有入口的代码才作分割
                    minSize: 1000, // chunks的最小大小
                    minChunks: 1, // 引用1次就被分包
                }
            }
        }
    },
    mode: "production",
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'index.html'),
            chunks: ["vendors", "index"]
        })
    ]
};